<div fxFlexFill fxLayout="row" class="" (window:resize)="onResize()">
  <aside fxFlex="15%" fxLayout="column" class="turbine-list">
    <div class="bg" fxFlexFill fxLayout="column">
      <div class="turbine-list-farm" fxFlex="30%" fxLayout="column">
        <div class="title">{{currentFarm?.farmName}}</div>
        <div class="scrollbar">
          <p><b>总装机容量<i>(MW)</i></b><span>{{currentFarm?.capacity}}</span></p>
          <p><b>日发电量(万kWh)</b>  <span>{{currentFarm?.powerDay.value*ratio | number:'1.1-2'}}</span></p>
          <p><b>有功功率(MW)</b> <span>{{currentFarm?.totalPower.value | number:'1.1-2'}}</span></p>
          <p><b>平均风速(m/s)</b><span>{{currentFarm?.avgWindSpeed.value | number:'1.1-2'}}</span></p>
          <div class="phase" *ngFor="let phase of tempLimitedPhases let i =index">
            <p><b [title]="phase.name+'有功功率(MW)'">{{phase.name}}有功功率(MW)</b><span>{{phase?.powers.value | number:'1.1-2'}}</span></p>
            <p><b [title]="phase.name+'平均风速(m/s)'">{{phase.name}}平均风速(m/s)</b><span>{{phase?.windSpeed.value | number:'1.1-2'}}</span></p>
          </div>
        </div>
      </div>

      <div class="turbine-list-formInfo turbine-statu" fxFlex="21%" fxLayout="column">
        <div class="title"><b></b>风机状态(台)
        </div>
        <div class="scrollbar">
          <p *ngFor="let turbStatu of limitedTurbstatus let i =index " [ngStyle]="{'color':turbStatu.color}" [ngClass]="{'isChecked':turbStatu?.isChecked}"
            (click)="turbStatuClick($event,turbStatu)">
            <strong [ngStyle]="{'background-color':turbStatu.color}"></strong> {{turbStatu.name}}
            <span>{{turbStatu.tole}}</span>
          </p>
        </div>
      </div>
      <div class="turbine-list-formInfo stages" fxFlex="18%" fxLayout="column">
        <div class="title"><b></b>建设分期(台)
        </div>
        <div class="scrollbar">
          <div class="force-overflow">
            <p *ngFor="let phase of tempLimitedPhases let i =index" [ngClass]="{'isChecked':phase?.isChecked}" (click)="phaseClick($event,phase)">
              <!--<input type="checkbox" (click)="turbStatuClick($event,phase)"/>-->
              {{phase.name}}
              <span>{{phase.value}}</span>
            </p>
          </div>
        </div>
      </div>
      <!--<div class="scrollbar" id="style-2">-->
      <div class="turbine-list-formInfo circuit" fxFlex="31%" fxLayout="column" >
        <div class="title"><b></b>集电线路(台)
        </div>
        <div class="scrollbar">
          <p *ngFor="let circuit of result let i =index" [ngClass]="{'isChecked':circuit?.isChecked}" (click)="circuitClick($event,circuit)">
            <!--<input type="checkbox" (click)="turbStatuClick($event,circuit)"/>-->
            {{circuit.name}}
            <span>{{circuit.value}}</span>
          </p>
        </div>
      </div>
    </div>
  </aside>
  <section fxFlex="85%" fxLayout="column" class="turbine-list-right">
    <header>
      <app-farm-selector [farmId]="farmId" (currentFarmChange)="onChangeFarm($event)"></app-farm-selector>
    </header>
    <main class="scrollbar turbine-list-rl" #content>
      <div class="category">
      
        <span *ngFor="let item of operCategoryEnable;let i=index" [ngClass]="{checked:item?.isChecked}" (click)="onCategory(item)">
          <i [ngClass]="item.operCategoryIcon" [ngStyle]="{color:item?.operCategoryColor}"></i>
          {{item.operCategoryName}}
        </span>
        
      </div>
      <div class="scrollbar-trubineList" id="style-3">
        <div class="trubineList force-overflow-trubineList">
          <section class="turbine" *ngFor="let item of allCheckTurbineList;let i=index" [ngStyle]="{zoom:zoom}">
            <app-turbine [showMainTurb]="showMainTurb" class="turbine-content"  (dblclick)="ondblclick(item.device)" [turbineId]="item?.device?.deviceId" [turbineName]="item.name"
              [statusColor]="item.turbStatusColor" [turBenchMark]="item?.device?.turBenchMark"  [turbineStatus]="item?.turbineStatus" [operCategorys]="operCategorys" [windSpeed]="item?.weed?.value"
              [power]="item.griPower.value" [isShowCategory]="isShowCategory" [turbSubState]="item?.turbSubState?.value">
            </app-turbine>
          </section>
        </div>
      </div>

    </main>
  </section>

</div>

